<template>
  <div class="user">
    <div>
      <span>姓名:</span>
      <span> {{ userName }} </span>
    </div>
    <div v-if="userType == 'teacher'">
      <span>教学班级：</span>
      <span v-for="(item, index) in classArr" :key="index" class="item">{{
        item.class_name
      }}</span>
    </div>
    <div v-if="userType == 'student'">
      <span>所在班级：</span>
      <span>{{ classData }}</span>
    </div>
    <div></div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted} from "vue"
import {Student, Teacher} from "../../api"
const userName = ref("")
const classArr = ref()
const classData = ref()
const userType = window.localStorage.getItem("modelType")
onMounted(async () => {
  const {id} = JSON.parse(window.localStorage.getItem("user")!)
  let res
  if (userType == "teacher") {
    res = await Teacher.getClassListByTeacherId({teacherId: id})
    classArr.value = res.data.classData[0].Grades
    userName.value = res.data.classData[0].username
  } else {
    res = await Student.getUserByStudentId({studentId: id})
    userName.value = res.data.userData.username
    classData.value = res.data.userData.Grade.class_name
  }

  console.log(res)
})

// const userName = ref(username)
</script>
<style lang="scss" scoped>
.user {
  padding: 50px 500px;
  text-align: left;
  & > div {
    padding: 25px;
    .item {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 2px;
      margin: 2px;
    }
  }
}
</style>
